<script setup lang="ts">
import {CommonTable} from "@/components/MyComponent/CommonTable/tableInterface";
import {Bookmark} from "@/api/sys/my/bookmark/types";
import {
  addBookmarkApi,
  addBookmarkCount,
  deleteBookmarkApi,
  editBookmarkApi,
  getBookmarkByIdApi,
  getBookmarkListApi
} from "@/api/sys/my/bookmark";
import {getIconApi} from "@/api/common/file";

const options: CommonTable<Bookmark, Bookmark> = {
  api: {
    add: addBookmarkApi,
    remove: deleteBookmarkApi,
    edit: editBookmarkApi,
    get: getBookmarkByIdApi,
    getList: getBookmarkListApi
  },
  attrs: [
    {
      prop: 'name',
      label: '名称',
      placeholder: '名称模糊搜索',
      columnWidth: 140,
    }, {
      prop: 'type',
      label: '类型',
      code: 'bookmark_type',
      formType: 'select',
    },
    {
      prop: 'link',
      label: '链接',
      columnWidth: 140,
      formType: 'textarea',
      notDisplayOn: ['list'],
      sort: false,
      query: false,
    }, {
      prop: 'remark',
      label: '描述',
      formType: 'textarea',
      notDisplayOn: ['list'],
      query: false,
    },
    {
      prop: 'status',
      label: '状态',
      code: 'status',
      formType: 'radio',
      notDisplayOn: ['list-phone'],
      columnWidth: 80,
    }, {
      prop: 'rate',
      label: '评分',
      formType: 'number',
      query: false,
      notDisplayOn: ['list-phone', 'list'],
      columnWidth: 80,
    }, {
      prop: 'count',
      label: '点击次数',
      formType: 'number',
      notDisplayOn: ['add', 'edit'],
      columnWidth: 80,
      query: false,
    },
    {
      prop: 'imageUrl',
      label: '图标',
      formType: 'image',
      image: {
        path: 'bookmark',
        size: 2,
        borderRadius: '0.1em'
      }
    },
  ],
  queryData: {
    pageSize: 50,
    order: {count: 'desc'}
  },
  title: '书签',
  perms: {
    add: '',
    remove: '',
    edit: '',
    view: '',
  },
  form: {
    initialForm: {
      id: 0,
      name: '',
      type: 1,
      link: '',
      status: 1
    },
    rules: {
      name: [{required: true, message: '请输入名称', trigger: 'blur'}],
      type: [{required: true, message: '请选择类型', trigger: 'blur'}],
      link: [{required: true, message: '请输入链接', trigger: 'blur'}],
      rate: [{required: true, message: '请输入评分', trigger: 'blur'},
        {type: 'number', message: '1-10之间', min: 1, max: 10}],
    },
  }
}

// 跳转到
function redirectTo(row: Bookmark) {
  window.open(row.link, '_blank')
  addBookmarkCount(row.id)
}

async function getIcon() {
  const file = await getIconApi('https://api.iowen.cn/favicon/www.iowen.cn.png')
  console.log('file', file)
}

function buildUrl(url: string) {
  try {
    const result = new URL(url)
    return result.hostname + '.png'
  } catch (e) {
    return false
  }

}
</script>

<template>
  <!--  <el-button @click="getIcon">获取图标</el-button>-->
  <x-common-table :options="options">
    <template #operation="{row}">
      <el-button round type="primary" size="small" plain @click="redirectTo(row)">
        <i-ep-top-right/>
      </el-button>
    </template>
    <template #formItem="{row}">
      <el-form-item label="图片" v-if="buildUrl(row.link) && !row.imageUrl">
        <el-image :src="'https://api.iowen.cn/favicon/'+buildUrl(row.link)" style="width: 2em"/>
      </el-form-item>
    </template>
  </x-common-table>
</template>

<style scoped lang="scss">

</style>